<template>
  <div>
    <div @click="getCode" v-if="show" :style="{ width: (162 / 96) + 'rem', height: (53 / 96) + 'rem', background: '#6168FE', border: (1 / 96) +'rem solid #CCCCCC', borderRadius: (4 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }">
      <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'FZKai-Z03S, KaiTi', fontWeight: '400', color: '#FFFFFF', lineHeight: (24 / 96) + 'rem' }">发送验证码</span>
    </div>
    <div v-if="!show" :style="{ width: (162 / 96) + 'rem', height: (53 / 96) + 'rem', background: '#6168FE', border: (1 / 96) +'rem solid #CCCCCC', borderRadius: (4 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }">
      <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'FZKai-Z03S, KaiTi', fontWeight: '400', color: '#FFFFFF', lineHeight: (24 / 96) + 'rem' }">{{ count }}</span>
    </div>
  </div>
</template>

<script>
import commonUtil from '../../utils/common.js';
export default{
  name: 'VfCode',
  props: {
    timeCount: {
      type: Number,
      default() {
        return 60;
      }
    },
    valueText: {
      type: String,
      default() {
        return "";
      }
    },
    valueType: {
      type: Number,
      default() {
        return 1;
      }
    },
    valueMsg: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      show: true,
      count: '',
      timer: null
    }
  },
  methods:{
    getCode(){
      if(this.valueType == 1 && !commonUtil.checkMobile(commonUtil.trim(this.valueText))) {
        this.$toast(this.valueMsg);
        return;
      }
      if(this.valueType == 2 && !commonUtil.checkEmail(commonUtil.trim(this.valueText))) {
        this.$toast(this.valueMsg);
        return;
      }
      if (!this.timer) {
        this.count = this.timeCount;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= this.timeCount) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
        this.$emit("getCode");
      }
    }
  }
}
</script>

<style scoped></style>
